<template>
  <div class="app-container">
    <!-- 搜索配置   -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="content" label="查询自动回复语句">
          <el-input
            v-model="queryParams.content"
            placeholder="回复内容"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search/>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <i-ep-refresh/>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <el-button type="success" @click="handleOpenDialog()">
          <i-ep-plus/>
          新增
        </el-button>
      </template>
      <el-tag type="primary">请使用zh-CN、en-US等正式语言标识来填写语言设置</el-tag>
      <el-table
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
      >
        <el-table-column label="ID" prop="id"/>
        <el-table-column label="名称" prop="replyName"/>
        <el-table-column label="回复的key" prop="replyKey"/>
        <el-table-column label="语言设置" prop="replyLang"/>
        <el-table-column label="回复内容" prop="replyValue"/>
        <el-table-column label="操作" fixed="right" align="left">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click.stop="handleUpdate(scope.row)"
            >
              <i-ep-edit/>
              编辑
            </el-button>
            <el-button
              type="primary"
              link
              size="small"
              @click.stop=" handleDelete(scope.row)"
            >
              <i-ep-delete/>
               删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!--自动回复抽屉-->
    <el-drawer
      v-model="dialog.visible"
      :title="dialog.title"
      size="30%"
      @close="handleCloseDialog"
    >
      <el-form
        ref="dataFormRef"
        :model="formData"
        :rules="computedRules"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="名称" prop="replyName">
          <el-input
            v-model="formData.replyName"
            placeholder="请输入自动回复的名称"
          />
        </el-form-item>
        <el-form-item label="语言设置" prop="replyLang">
          <el-input v-model="formData.replyLang" placeholder="replyLang"/>
        </el-form-item>
        <el-form-item label="回复的key" prop="replyKey">
          <el-select
            v-model="formData.replyKey"
            placeholder="Select"
            style="width: 200px"
          >
            <el-option
              v-for="item in replyKeys"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="配置值" prop="replyValue">
          <el-input v-model="formData.replyValue" placeholder="回复内容"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmitClick">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup lang="js">
defineOptions({
  name: "AutoReply",
  inherititems: false,
});
import {deleteById, getPage, postAutoReply} from "@/api/autoreply.js";

const queryFormRef = ref(null);

const loading = ref(false);
const total = ref(0);
const replyKeys = ref(["AllNotice", "OfflineMessage", "WelcomeMessage"]);//类型

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  content: "",
});

// 配置表格数据
const pageData = ref();

/** 查询 */
function handleQuery() {
  loading.value = true;
  getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.count
    })
    .finally(() => {
      loading.value = false;
    });
}

const computedRules = computed(() => {
  const rules = {
    replyValue: [
      {required: true, message: "请输入自动回复的值", trigger: "blur"},
    ],
  };
  return rules;
});
const dialog = reactive({
  title: "",
  visible: false,
});
const formData = ref({});

function handleUpdate(row) {
  dialog.visible = true;
  dialog.title = "修改自动回复";
  formData.value = {};
  formData.value.id = row.id;
  formData.value.replyKey = row.replyKey;
  formData.value.replyLang = row.replyLang;
  formData.value.replyName = row.replyName;
  formData.value.replyValue = row.replyValue;
}

const dataFormRef = ref(null);

/** 新增 */
function handleOpenDialog() {
  dataFormRef.value?.resetFields();
  dataFormRef.value?.clearValidate();
  formData.value = {};
  dialog.visible = true;
  dialog.title = "新增自动回复";
}

/**
 * 删除
 * @param row
 */
function handleDelete(row) {
  ElMessageBox.confirm("确认删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteById(row.id).then(() => {
      handleQuery();
    })
  });

}

/**
 * 提交修改或者删除
 */
function handleSubmitClick() {
  dataFormRef.value.validate((isValid) => {
    if (isValid) {
      loading.value = true;
      postAutoReply(formData.value)
        .then((data) => {
          dialog.visible = false;
          handleQuery();
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}


/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  dataFormRef.value?.resetFields();
  dataFormRef.value?.clearValidate();
  formData.value.id = undefined;
}

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value?.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped lang="scss"></style>
